<template>
    <div class="box">

        <div v-if="isRemoveGroup" class="el-dialog__wrapper" style="z-index: 2000;position: absolute;background: rgba(0,0,0,0.4);">
            <div role="dialog" aria-modal="true" aria-label="提示" class="el-dialog el-dialog--center" style="margin-top: 25vh; width: 40%;">
                <div class="el-dialog__header"><span class="el-dialog__title">提示</span>
                    <!--<button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>-->
                </div>
                <div class="el-dialog__body"><span>您已被群主/管理员移出群聊</span></div>
                <div class="el-dialog__footer"><span class="dialog-footer">
                    <button @click="delCurrChat();" type="button" class="el-button el-button--primary"><span>我知道了</span></button>
                </span>
                </div>
            </div>
        </div>

        <div class="box-hd">
            <div class="title-wrap">
                <div class="title" @click="showGroupSubs()">
                    <div class="name">{{currentChatId != 0 ? chatInfo.name : ''}}</div>
                    <div class="num" v-if="chatInfo && chatInfo.msgType == 13">（{{currentGroupSubs ? currentGroupSubs.length : 0}}）</div>
                    <icon :type="showGroupMembers ? 'arrow-up' : 'arrow-down'" color="#848484" :size="16" v-if="chatInfo && chatInfo.msgType == 13"></icon>
                </div>
            </div>
            <div class="members" v-if="currentGroupSubs && showGroupMembers">
                <div class="members-container">
                    <div class="members-inner">
                        <div class="member">
                            <div class="member-item" v-for="(item, index) in currentGroupSubs" :key="index">
                                <div style="position: relative;">
                                    <img src="../../assets/owner.png" class="role-type" v-if="item.isOwner"/>
                                    <img src="../../assets/manager.png" class="role-type" v-if="!item.isOwner && item.isManager"/>
                                    <img class="avatar" src="../../assets/person_icon.jpg" @click="showProfile($event, item)" v-if="item.usericon == '' || !item.usericon">
                                    <img class="avatar" :src="item.usericon" @click="showProfile($event, item)" v-else>
                                </div>

                                <p class="nickname">{{item.nickname}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="members-mask" @click="showGroupMembers = false" v-if="currentGroupSubs && showGroupMembers"></div>
        </div>
        <div class="box-bd" v-if="currentChatId != 0">
            <div class="answer-wrap" v-if="answerFlag">
                <div class="answer-txt">回复：{{answerTxt}}</div>
                <img @click="answerFlag = false;" class="answer-close" src="../../assets/icon_close_1.png" alt="">
            </div>

            <el-scrollbar ref="msgScrollbar" :native="false" :noresize="true" style="height: 100%">
                <div class="secure-info" v-if="chatInfo.msgData.length > 0"><icon type="lock" color="#4288ff"></icon>此对话中所发送的消息都已进行端对端的加密</div>
                <div class="message-empty" v-else>
                    <p>暂时没有新消息</p>
                </div>
                <div class="message-content" v-if="chatInfo.msgData && chatInfo.msgType == 11">
                    <div class="message-item" v-if="item.contentType != 1000" v-for="(item, index) in chatInfo.msgData" :key="index">
                        <div class="message-system">
                            <div class="time-data" v-if="item.contentType != 55 && isShowDate(index,item.date, 'hh:mm')">
                                <template v-if="item.destroy == 0">
                                    {{getDateFormat(item.date, 'hh:mm')}}
                                </template>
                                <template v-else>不支持消息类型，请在手机上查看</template>
                            </div>
                            <div class="time-data" v-if="item.contentType == 55">
                                <template v-if="item.own == 0">
                                    对方撤回了一条消息
                                </template>
                                <template v-else>
                                    你撤回了一条消息
                                </template>
                            </div>
                            <!--<div class="time-data" v-else>不支持消息类型，请在手机上查看</div>-->
                        </div>
                        <div :class="item.own == 0 ? 'left' : 'right'" v-if="item.contentType != 55 && item.destroy == 0">
                            <template v-if="item.own == 0">
                                <img v-if="chatInfo.icon" class="avatar" :src="chatInfo.icon" alt="">
                                <img v-else class="avatar" src="../../assets/person_icon.jpg" alt="">
                            </template>
                            <template v-else>
                                <img class="avatar" v-if="userInfo.user_icon" :src="userInfo.user_icon" alt="">
                                <img class="avatar" v-else src="../../assets/person_icon.jpg" alt="">
                            </template>
                            <div class="content" v-if="item.contentType == 1021">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.own == 0 ? 'primary' : 'default'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre v-html="transToEmojiHtml(JSON.parse(item.msg).content)" ></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1012">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.own == 0 ? 'primary' : 'default'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="answer-cont">
                                            <div class="answer-name">回复：{{getAnswerName(item)}}</div>
                                            <div class="answer-sc">
                                                <div style="font-size: 28px;color: #4288FF;line-height: 28px;">“</div>
                                                <div style="position: relative;">
                                                    <template v-if="item.ellipsis">
                                                        <template v-if="!item.scExpand">
                                                            <pre  style="margin-left: 5px;" v-html="transToEmojiHtml(item.ellipsisSc)" ></pre>
                                                            <img @click="item.scExpand = true;"  style="position: absolute;right: -10px;bottom: 0;cursor: pointer;" src="../../assets/chat_icon_open_blue.png" alt="">
                                                        </template>

                                                        <template v-else>
                                                            <pre style="margin-left: 5px;" v-html="transToEmojiHtml(JSON.parse(item.msg).sc)" ></pre>
                                                            <img @click="item.scExpand = false;" style="position: absolute;right: -10px;bottom: 0;cursor: pointer;" src="../../assets/chat_icon_takeback_blue.png" alt="">
                                                        </template>

                                                    </template>
                                                    <template v-else>
                                                        <pre style="margin-left: 5px;" v-html="transToEmojiHtml(JSON.parse(item.msg).sc)" ></pre>
                                                    </template>
                                                </div>
                                            </div>

                                            <div class="answer-split">
                                                - - - - - - - - - -
                                            </div>

                                            <div class="answer-rc">
                                                <pre v-html="transToEmojiHtml(JSON.parse(item.msg).rc)" ></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div v-else-if="item.contentType == 1022 || item.contentType == 1015" class="content">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble-img">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre @click="showPreview(item.msgId)"><img class="picture" @load="imageLoaded" :src="JSON.parse(item.msg).url" /></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="item.contentType == 1004" class="content">
                                <div class="bubble-img" style="border: 0;">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <div class="video-wrap" style="position: relative;cursor: pointer;">
                                                <img @click="play(item.msgId);" style="width: 160px;display: block;" @load="imageLoaded" :src="JSON.parse(item.msg).snapshot+'?x-oss-process=image/resize,w_160'" alt="">
                                                <img @click="play(item.msgId);" style="width: 30px;position: absolute;left: 50%;top: 50%;margin-left: -15px;margin-top: -15px;" src="../../assets/icon_videoplay2x.png" alt="">
                                            </div>
                                            <video :id="item.msgId" height="0" style="width: 0px;height: 0px;" :src="JSON.parse(item.msg).videoPath">
                                            </video>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="item.contentType == 1018" class="content">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="file-cont" @contextmenu.prevent="handleRight($event, item)">
                                    <div class="file-cont_l">
                                        <div class="file-name" :title="JSON.parse(item.msg).name">{{JSON.parse(item.msg).name | ecllipseFileName}}</div>
                                        <div class="file-info">
                                            <span>{{JSON.parse(item.msg).size | getFileSize}}</span>
                                            <span class="file-info_down" @click="downLoad(JSON.parse(item.msg).path)">下载</span>
                                        </div>
                                    </div>
                                    <div class="file-cont_r">
                                        <img :src="extIcons[JSON.parse(item.msg).ext]" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1013">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.own == 0 ? 'primary' : 'default'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre>我发了一条语音，请在手机上查看</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1016 || item.contentType == 1011">
                                <template v-if="item.own == 1">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.own == 0 ? 'primary' : 'default'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre>我发了一个红包，请在手机上查看</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content" v-else>
                                <!--1000 sys msg-->
                                <template v-if="item.contentType != 1000">
                                    <template v-if="item.own == 1">
                                        <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                        <img @click="resend(item)" class="resend" v-if="item.stage == -2 || item.stage == -3" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                    </template>
                                    <div class="bubble" :class="item.own == 0 ? 'primary' : 'default'">
                                        <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                            <div class="pain">
                                                <pre>不支持的消息类型，请在手机上查看</pre>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="stage-del" v-if="item.stage == -3 && item.tipsMsg">{{item.tipsMsg}}</div>
                    </div>
                </div>
                <div class="message-content" v-if="chatInfo.msgData && chatInfo.msgType == 13">
                    <div class="message-item" v-if="item.contentType != 1000" v-for="(item, index) in chatInfo.msgData" :key="index">
                        <div class="message-system">
                            <div class="time-data" v-if="item.contentType != 55 && isShowDate(index,item.date, 'hh:mm')">
                                <template v-if="item.destroy == 0">
                                    {{getDateFormat(item.date, 'hh:mm')}}
                                </template>
                                <template v-else>不支持消息类型，请在手机上查看</template>
                            </div>
                            <div class="time-data" v-if="item.contentType == 55">
                                <template v-if="item.senderid != userInfo.id">
                                    “{{getUserName(item.senderid)}}”撤回了一条消息
                                </template>
                                <template v-else>
                                    你撤回了一条消息
                                </template>
                            </div>
                            <!--<div class="time-data" v-else>不支持消息类型，请在手机上查看</div>-->
                        </div>
                        <div :class="[item.senderid == userInfo.id ? 'right' : 'left','group-content']" v-if="item.contentType != 55 && item.destroy == 0">

                            <img @click="showProfileChat($event, item.senderid)" class="avatar" :src="getUserAvatar(item.senderid)" v-if="getUserAvatar(item.senderid) != ''">
                            <img @click="showProfileChat($event, item.senderid)" class="avatar" src="../../assets/person_icon.jpg" v-else>

                            <div class="content" v-if="item.contentType == 1021 || item.contentType == 1007">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.senderid == userInfo.id ? 'default' : 'primary'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre v-html="transToEmojiHtml(JSON.parse(item.msg).content)"></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1012">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.senderid == userInfo.id ? 'default' : 'primary'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="answer-cont">
                                            <div class="answer-name">回复：{{getAnswerName(item)}}</div>
                                            <div class="answer-sc">
                                                <div style="font-size: 28px;color: #4288FF;line-height: 28px;">“</div>
                                                <div style="position: relative;">
                                                    <template v-if="item.ellipsis">
                                                        <template v-if="!item.scExpand">
                                                            <pre  style="margin-left: 5px;" v-html="transToEmojiHtml(item.ellipsisSc)" ></pre>
                                                            <img @click="item.scExpand = true;"  style="position: absolute;right: -10px;bottom: 0;cursor: pointer;" src="../../assets/chat_icon_open_blue.png" alt="">
                                                        </template>

                                                        <template v-else>
                                                            <pre style="margin-left: 5px;" v-html="transToEmojiHtml(JSON.parse(item.msg).sc)" ></pre>
                                                            <img @click="item.scExpand = false;" style="position: absolute;right: -10px;bottom: 0;cursor: pointer;" src="../../assets/chat_icon_takeback_blue.png" alt="">
                                                        </template>

                                                    </template>
                                                    <template v-else>
                                                        <pre style="margin-left: 5px;" v-html="transToEmojiHtml(JSON.parse(item.msg).sc)" ></pre>
                                                    </template>
                                                </div>
                                            </div>

                                            <div class="answer-split">
                                                - - - - - - - - - -
                                            </div>

                                            <div class="answer-rc">
                                                <pre v-html="transToEmojiHtml(JSON.parse(item.msg).rc)" ></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="item.contentType == 1022 || item.contentType == 1015" class="content">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble-img">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre @click="showPreview(item.msgId)"><img class="picture" @load="imageLoaded" :src="JSON.parse(item.msg).url" /></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="item.contentType == 1004" class="content">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <div class="bubble-img" style="border: 0;">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <div class="video-wrap" style="position: relative;cursor: pointer;">
                                                <img @click="play(item.msgId);" style="width: 160px;display: block;" @load="imageLoaded" :src="JSON.parse(item.msg).snapshot+'?x-oss-process=image/resize,w_160'" alt="">
                                                <img @click="play(item.msgId);" style="width: 30px;position: absolute;left: 50%;top: 50%;margin-left: -15px;margin-top: -15px;" src="../../assets/icon_videoplay2x.png" alt="">
                                            </div>
                                            <video :id="item.msgId" height="0" style="width: 0px;height: 0px;" :src="JSON.parse(item.msg).videoPath">
                                            </video>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else-if="item.contentType == 1018" class="content">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="file-cont" @contextmenu.prevent="handleRight($event, item)">
                                    <div class="file-cont_l">
                                        <div class="file-name" :title="JSON.parse(item.msg).name">{{JSON.parse(item.msg).name | ecllipseFileName}}</div>
                                        <div class="file-info">
                                            <span>{{JSON.parse(item.msg).size | getFileSize}}</span>
                                            <span class="file-info_down" @click="downLoad(JSON.parse(item.msg).path)">下载</span>
                                        </div>
                                    </div>
                                    <div class="file-cont_r">
                                        <img :src="extIcons[JSON.parse(item.msg).ext]" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1013">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.senderid == userInfo.id ? 'default' : 'primary'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre>我发了一条语音，请在手机上查看</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else-if="item.contentType == 1016 || item.contentType == 1011">
                                <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                <template v-if="item.senderid == userInfo.id">
                                    <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                    <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                </template>
                                <div class="bubble" :class="item.senderid == userInfo.id ? 'default' : 'primary'">
                                    <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                        <div class="pain">
                                            <pre>我发了一个红包，请在手机上查看</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-else>
                                <!--1000 sys msg-->
                                <template v-if="item.contentType != 1000">
                                    <div class="nickname" v-if="item.senderid != userInfo.id">{{JSON.parse(item.msg).remark}}</div>
                                    <template v-if="item.senderid == userInfo.id">
                                        <img v-if="item.stage == -1" src="../../assets/send_loading.gif"/>
                                        <img @click="resend(item)" class="resend" v-if="item.stage == -2" src="../../assets/resend_icon.png" title="发送失败点击重新发送" alt="发送失败点击重新发送"/>
                                    </template>
                                    <div class="bubble" :class="item.senderid == userInfo.id ? 'default' : 'primary'">
                                        <div class="bubble-cont" @contextmenu.prevent="handleRight($event, item)">
                                            <div class="pain">
                                                <pre>不支持的消息类型，请在手机上查看</pre>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div class="box-bd" v-else>
            <div class="none">
                <img class="img" src="../../assets/no_message.png">
                <div class="text">未选择聊天</div>
            </div>
        </div>
        <div class="box-ft" v-if="currentChatId != 0">
            <div class="toolbar">
                <el-popover trigger="click" placement="top-start">
                    <emoji-box @choose="chooseEmoji($event)"></emoji-box>
                    <a class="tool-item" style="cursor: pointer;" slot="reference"><icon type="face" color="#9da4b3" :size="22"></icon></a>
                </el-popover>
                <a class="tool-item">
                    <icon type="img" color="#9da4b3" :size="26"></icon>
                    <input style="cursor: pointer;font-size:0" id="image_file_id" class="input-file" type="file" accept="image/gif,image/jpeg,image/x-png" @change="uploadImage($event)">
                </a>

                <a class="tool-item">
                    <img class="icon icon-img" style="width: 26px;" src="../../assets/expression_icon_file.png" alt="">
                    <input id="file_id" style="cursor: pointer;font-size:0" class="input-file" type="file" @change="uploadFile($event)">
                </a>
            </div>
            <div class="content" @dragover="fileDragover" @drop="fileDrop">
                <!-- <pre class="text-area" contenteditable="true" @input="bingMsgContent($event)" @keyup.ctrl.enter="ctrlEnter" v-html="transToEmojiHtml(this.content)"></pre> -->
                <textarea  id="editArea" class="text-area" v-model="content" @cut="cut($event)" @keydown="listen($event)" @keyup="listenUp($event)" @keyup.enter.exact="enter" @keyup.ctrl.enter="ctrlEnter" v-if="chatInfo.status != 1"></textarea>
                <p class="forbid" v-else>群主已开启全员禁言，无法发言</p>
            </div>
            <div class="action">
                <span v-if="fastSend" class="fast-send">发送太快，请稍后在发</span>
                <span class="desc">按下Ctrl+Enter换行</span>
                <el-button @click="sendMessage">发送</el-button>
            </div>
        </div>
        <pop :visible="showProfilePop" backgroundColor="transparent" @close="showProfilePop = false" :posX="profileInfo.x" :posY="profileInfo.y">
            <div class="mini-profile">
                <img class="mini-profile-avatar" src="../../assets/person_icon.jpg" v-if="profileInfo.avatar == ''">
                <img class="mini-profile-avatar" :src="profileInfo.avatar" alt="" v-else>
                <div class="mini-profile-info">
                    <div class="profile-name">{{profileInfo.name}}</div>
                    <div v-if="userInfo.id != profileInfo.id" @click="chooseFriend();"><a style="cursor: pointer;"><icon type="message" color="#4288ff" :size="30"></icon></a></div>
                </div>
            </div>
        </pop>

        <pop :visible="showChatProfilePop" backgroundColor="transparent" @close="showChatProfilePop = false" :posX="profileInfo.x" :posY="profileInfo.y">
            <div class="mini-profile" style="width: 120px;height: 157px;">
                <img class="mini-profile-avatar" style="width: 120px;height: 120px;" src="../../assets/person_icon.jpg" v-if="profileInfo.avatar == ''">
                <img class="mini-profile-avatar" style="width: 120px;height: 120px;" :src="profileInfo.avatar" alt="" v-else>
                <div class="mini-profile-info" style="height: 37px;">
                    <div class="profile-name" style="width: 100px;font-size: 12px;">{{profileInfo.name}}</div>
                    <div v-if="userInfo.id != profileInfo.id" @click="chooseFriend();"><a style="cursor: pointer;"><icon type="message" color="#4288ff" :size="20"></icon></a></div>
                </div>
            </div>
        </pop>
        <context-menu :msg="currentMsgData" :visible="contextMenuShow" position="message" :clickPosition="clickPosition" :copyVisible="copyVisibleStatus" :reCallDisable="reCallDisableStatus" :answerVisible="answerVisibleStatus" :reCallVisible="reCallVisibleStatus" @close="closeContextMenu" @confirm="clickContextMenu($event)"></context-menu>
        <replay-box :visible="showReplay" :msg="currentMsgData"  @close="showReplay = false"></replay-box>
        <at-somebody :isManager="isManager" :atUserList="atUserList" v-if="showAt" :visible="showAt" :msg="currentMsgData" @selectList="selectAtUser" @close="showAt = false"></at-somebody>
        <img-preview :images="imagesData" :currentIndex="imgPreviewIndex" @close="hidePreview" v-if="imgPreviewVisible"></img-preview>
        <div @click="showPasteImg = false" v-if="showPasteImg" class="v-modal" tabindex="0" style="z-index: 2000;"></div>
        <div class="el-dialog__wrapper" style="z-index: 2001;" v-if="showPasteImg">
            <div role="dialog" aria-modal="true" aria-label="发送图片" class="el-dialog el-dialog--center" style="margin-top: 15vh; width: 30%;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">发送图片</span>
                    <button @click="showPasteImg = false" type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body" style="text-align: center;max-height: 300px;overflow-y: scroll;">
                    <img :src="pasteImg" style="max-width: 100%;">
                </div>
                <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button @click="showPasteImg = false" type="button" class="el-button el-button--default"><!----><!----><span>取 消</span></button>
                        <button @click="sendPasteImg();" type="button" class="el-button el-button--primary"><!----><!----><span>发 送</span></button>
                    </span>
                </div>
            </div>
        </div>
        <div v-if="showNotFriend" class="van-toast van-toast--middle van-toast--text" style="z-index: 2006;">
            <div class="van-toast__text">你们不是好友，无法对话</div>
        </div>
    </div>
</template>
<script>
    import { baseApi } from '@/api'
    import icon from '@/components/icon/index'
    import emojiBox from '@/components/emoji-box/index'
    import pop from '@/components/pop/index'
    import contextMenu from '@/components/context-menu/index'
    import replayBox from '@/components/replay-box/index'
    import atSomebody from '@/components/at-somebody/index'
    import imgPreview from '@/components/img-preview/index'
    import utils from '@/utils/common'
    import scrollIntoView from '@/utils/scroll-into-view'
    import emoji from '@/utils/emoji'
    import excelIcon from '@/assets/file_icon_excel.png'
    import pdfIcon from '@/assets/file_icon_pdf.png'
    import pptIcon from '@/assets/file_icon_ppt.png'
    import txtIcon from '@/assets/file_icon_txt.png'
    import unknownIcon from '@/assets/file_icon_unknown.png'
    import wordIcon from '@/assets/file_icon_word.png'


    export default {
        data() {
            return {
                showNotFriend: false,
                lastSendTime: '',
                fastSend: false,
                answerFlag: false,
                answerTxt: '',
                // atIndexs: [],
                addPasteListen: false,
                showPasteImg: false,
                pasteImg: '',
                extIcons: {
                    excel: excelIcon,
                    pdf: pdfIcon,
                    ppt: pptIcon,
                    txt: txtIcon,
                    unknown: unknownIcon,
                    word: wordIcon
                },
                showAt: false,
                profileInfo: {
                    x: 0,
                    y: 0,
                    id: 0,
                    avatar: '',
                    name: ''
                },
                showReplay: false,
                showGroupMembers: false,
                showProfilePop: false,
                showChatProfilePop: false,
                contextMenuShow: false,
                clickPosition: null,
                currentMsgData: null,
                imgPreviewVisible: false,
                imgPreviewIndex: 0
            }
        },

        watch: {
            currentChatId() {
                this.$nextTick(function () {
                    document.querySelector('#editArea').focus()
                })
            },
            chatInfo() {
                this.$nextTick(() => {
                    try {
                        let pasteEle = document.getElementById('editArea')
                        if (pasteEle && !this.addPasteListen) {
                            this.addPasteListen = true
                            var that = this
                            pasteEle.addEventListener('paste', function (e) {
                                try {
                                    var item = e.clipboardData.items[0]
                                    var pasteFile = item.getAsFile()
                                    // pasteFile就是获取到的文件
                                    var reader = new FileReader()
                                    reader.onload = function (event) {
                                        var base64Img = event.target.result
                                        that.showPasteImg = true
                                        that.pasteImg = base64Img
                                    }
                                    reader.readAsDataURL(pasteFile)
                                } catch (e) {
                                }
                            })
                            let isGroup = this.type == 'group'
                            if (isGroup) {
                                let listenArr = ['click', 'keyup']
                                listenArr.forEach(function(item) {
                                    pasteEle.addEventListener(item, function (e) {
                                        // 删除键过滤
                                        if (item == 'keyup' && e.keyCode == 8) {
                                            return
                                        }
                                        var text = utils.getSelectText(this)
                                        var startSelIndex = utils.getCursortPosition(this)
                                        let match = false
                                        // 有选中文字
                                        if (text) {
                                            let endSelIndex = startSelIndex + text.length
                                            for (let i = 0; i < that.atIndexs.length; i++) {
                                                let start = that.atIndexs[i].start
                                                let end = that.atIndexs[i].end
                                                // 头部命中区间
                                                if (startSelIndex >= start && startSelIndex <= end) {
                                                    startSelIndex = start
                                                    if (endSelIndex <= end) {
                                                        endSelIndex = end + 1
                                                    }
                                                    match = true
                                                }
                                                // 尾部命中区间
                                                if (endSelIndex > start && endSelIndex < end) {
                                                    endSelIndex = end + 1
                                                    match = true
                                                }
                                            }
                                            if (match) {
                                                if (item == 'keyup' && e.keyCode == 37) {
                                                    utils.setSelectText(this, startSelIndex, endSelIndex, 'backward')
                                                } else {
                                                    utils.setSelectText(this, startSelIndex, endSelIndex)
                                                }
                                            }
                                            // 只有光标移动
                                        } else {
                                            for (let i = 0; i < that.atIndexs.length; i++) {
                                                let start = that.atIndexs[i].start
                                                let end = that.atIndexs[i].end
                                                // 光标命中区间
                                                if (startSelIndex > start && startSelIndex <= end) {
                                                    if (item == 'keyup' && e.keyCode == 37) {
                                                        startSelIndex = start
                                                    } else {
                                                        startSelIndex = end + 1
                                                    }
                                                    match = true
                                                }
                                            }
                                            if (match) {
                                                utils.setCaretPosition(this, startSelIndex)
                                            }
                                        }
                                    })
                                })
                            }
                        }
                    } catch (e) {}
                    // 转发不滚动到底部
                    let isReplayMsg = this.$store.state.chat.isReplyMsg
                    if (this.$refs['msgScrollbar'] && !isReplayMsg) {
                        this.$refs['msgScrollbar'].update()
                        this.$refs['msgScrollbar'].wrap.scrollTop = this.$refs['msgScrollbar'].wrap.scrollHeight
                    }
                    this.$store.dispatch('updateIsReplyMsg', false)
                })
            }
        },
        computed: {
            type() {
                let id = this.$store.state.chat.currentChatId
                let info = this.$store.state.chat.chatList.filter(el => { return el.id == id })[0]
                if (info.msgType == 11) {
                    return 'friend'
                } else {
                    return 'group'
                }
            },
            content: {
                get () {
                    let id = this.$store.state.chat.currentChatId
                    let objs = this.$store.state.chat.chatInputObj
                    return objs[id].content
                },
                set (newValue) {
                    this.$store.dispatch('modifyChatInputContent', { id: this.$store.state.chat.currentChatId, content: newValue })
                    // this._setContentAtIndexs()
                }
            },
            atIndexs() {
                let arr = []
                let content = this.content
                if (this.type == 'group') {
                    let list = this.atUserList
                    for (let i = 0; i < list.length; i++) {
                        let name = list[i].name
                        let startIndex = content.indexOf('@' + name + ' ')
                        if (startIndex != -1) {
                            var atUser = {
                                start: startIndex,
                                end: startIndex + name.length + 1
                            }
                            arr.push(atUser)
                        }
                    }
                }
                return arr
            },
            atUserList: {
                get () {
                    let id = this.$store.state.chat.currentChatId
                    let objs = this.$store.state.chat.chatInputObj
                    return objs[id].atUserList
                },
                set (newValue) {
                    this.$store.dispatch('modifyChatInputAtList', { id: this.$store.state.chat.currentChatId, list: newValue })
                }
            },
            isManager() {
                var id = this.$store.state.base.userInfo.id
                let length = this.$store.state.chat.currntGroupSubs.filter(el => { return el.id == id && el.isManager }).length
                return length > 0
            },
            currentChatId() {
                this.answerTxt = ''
                this.answerFlag = false
                return this.$store.state.chat.currentChatId
            },
            isRemoveGroup() {
                let id = this.$store.state.chat.currentChatId
                let objs = this.$store.state.chat.chatInputObj
                if (objs && objs[id]) {
                    if (objs[id].type == 'group') {
                        let groups = this.$store.state.base.groupList.filter(el => { return el.id == id })
                        if (groups.length > 0) {
                            if (groups[0].isRemove) {
                                return true
                            }
                        }
                    }
                }
                return false
            },
            currentGroupSubs() {
                let subs =  this.$store.state.chat.currntGroupSubs
                if (subs && subs.length > 0) {
                    for (let i = 0; i < subs.length; i++) {
                        let nameObj = subs[i]
                        let remark = ''
                        let friends = this.$store.state.base.friendList
                        // 获取好友备注名称
                        for (let key in friends) {
                            let fris = friends[key]
                            let filterObj = fris.filter(el => { return el.id == nameObj.id })
                            if (filterObj.length > 0 && filterObj[0].remark) {
                                remark = filterObj[0].remark
                            }
                        }
                        if (!remark) {
                            if (nameObj.remark) {
                                remark = nameObj.remark
                            }
                        }
                        if (remark) {
                            nameObj.nickname = remark
                        }
                    }
                }
                return subs
            },
            chatInfo() {
                let info = null
                let currentChatId = this.currentChatId
                if (currentChatId != 0) {
                    info = this.$store.state.chat.chatList.filter(el => { return el.id == currentChatId })[0]
                    // 处理群昵称显示
                    if (info.msgType == 13) {
                        if (info.msgData && info.msgData.length > 0) {
                            for (let i = 0; i < info.msgData.length; i++) {
                                let nameObj = info.msgData[i]
                                if (!nameObj.remark) {
                                    let nameObjMsg = JSON.parse(nameObj.msg)
                                    let remark = ''
                                    let friends = this.$store.state.base.friendList
                                    // 获取好友备注名称
                                    for (let key in friends) {
                                        let fris = friends[key]
                                        let filterObj = fris.filter(el => { return el.id == nameObj.senderid })
                                        if (filterObj.length > 0 && filterObj[0].remark) {
                                            remark = filterObj[0].remark
                                        }
                                    }
                                    // 没有好友备注则继续获取群备注名称,没有群备注则取默认名称
                                    if (!remark) {
                                        let subs = this.$store.state.chat.currntGroupSubs
                                        if (subs) {
                                            let filterGroupObj = subs.filter(el => { return el.id == nameObj.senderid })
                                            if (filterGroupObj.length > 0) {
                                                if (filterGroupObj[0].remark) {
                                                    remark = filterGroupObj[0].remark
                                                } else {
                                                    remark = filterGroupObj[0].nickname
                                                }
                                            }
                                        }
                                    }
                                    nameObjMsg.remark = remark
                                    nameObj.msg = JSON.stringify(nameObjMsg)
                                }
                            }
                        }
                    }
                    // 处理文件类型扩展名
                    let fileInfo = info.msgData.filter(el => { return el.contentType == '1018' })
                    for (let i = 0; i < fileInfo.length; i++) {
                        let msg = JSON.parse(fileInfo[i].msg)
                        let fileName = msg.path
                        var index = fileName.lastIndexOf('.')
                        let ext = fileName.substring(index + 1)
                        ext = ext.toLocaleLowerCase()
                        if (ext == 'xls' || ext == 'xlsx' || ext == 'csv') {
                            ext = 'excel'
                        } else if (ext == 'doc' || ext == 'docx') {
                            ext = 'word'
                        } else if (ext == 'pdf') {
                            ext = 'pdf'
                        } else if (ext == 'ppt' || ext == 'pptx') {
                            ext = 'ppt'
                        } else if (ext == 'txt') {
                            ext = 'txt'
                        } else {
                            ext = 'unknown'
                        }
                        msg.ext = ext
                        fileInfo[i].msg = JSON.stringify(msg)
                    }
                }
                return info
            },
            userInfo() {
                return this.$store.state.base.userInfo ? this.$store.state.base.userInfo : {}
            },
            copyVisibleStatus() {
                let status = true
                if (this.currentMsgData) {
                    if (this.currentMsgData.contentType == 1022 || this.currentMsgData.contentType == 1004 || this.currentMsgData.contentType == 1018 || this.currentMsgData.contentType == 1011 || this.currentMsgData.contentType == 1016 || this.currentMsgData.contentType == 1013) {
                        status = false
                    }
                }
                return status
            },
            answerVisibleStatus() {
                let status = false
                if (this.currentMsgData) {
                    if ((this.currentMsgData.contentType == 1021 || this.currentMsgData.contentType == 1012 || this.currentMsgData.contentType == 1007) && this.currentMsgData.own != 1 && this.currentMsgData.senderid != this.userInfo.id) {
                        status = true
                    }
                }
                return status
            },
            reCallDisableStatus() {
                let status = false
                if (this.currentMsgData) {
                    let now = utils.getTimestamp()
                    let time = (now - this.currentMsgData.date) / 1000 / 60
                    if (time > 2) {
                        status = true
                    }
                }
                return status
            },
            reCallVisibleStatus() {
                let status = true
                if (this.currentMsgData) {
                    if (this.currentMsgData.groupid) {
                        if (this.currentMsgData.senderid != this.userInfo.id) {
                            status = false
                        }
                    } else {
                        if (this.currentMsgData.own == 0) {
                            status = false
                        }
                    }
                }
                return status
            },
            imagesData() {
                let images = []
                if (this.chatInfo && this.chatInfo.msgData) {
                    images = this.chatInfo.msgData.filter(el => { return el.contentType == 1022 }).map(el => {
                        if (el.contentType == 1022) {
                            return {
                                id: el.msgId,
                                url: JSON.parse(el.msg).url
                            }
                        }
                    })
                }
                return images
            }
        },
        components: {
            icon,
            pop,
            emojiBox,
            contextMenu,
            replayBox,
            imgPreview,
            atSomebody
        },
        methods: {
            delCurrChat() {
                this.$store.dispatch('delChatListItem', this.currentChatId)
            },
            imageLoaded() {
                if (this.$refs['msgScrollbar']) {
                    this.$refs['msgScrollbar'].update()
                    this.$refs['msgScrollbar'].wrap.scrollTop = this.$refs['msgScrollbar'].wrap.scrollHeight
                }
            },
            getAnswerName(item) {
                if (item.contentType != '1012') {
                    return
                }
                let remark = ''
                let friends = this.$store.state.base.friendList
                let msg = JSON.parse(item.msg)
                let sid = msg.sid
                if (this.type == 'friend') {
                    if (sid == this.userInfo.id) {
                        remark = this.userInfo.nick_name
                        return remark
                    }
                    // 获取好友备注名称
                    for (let key in friends) {
                        let fris = friends[key]
                        let filterObj = fris.filter(el => { return el.id == sid })
                        if (filterObj.length > 0) {
                            if (filterObj[0].remark) {
                                remark = filterObj[0].remark
                            } else {
                                remark = filterObj[0].nickname
                            }
                            break
                        }
                    }
                } else {
                    // 获取好友备注名称
                    for (let key in friends) {
                        let fris = friends[key]
                        let filterObj = fris.filter(el => { return el.id == sid })
                        if (filterObj.length > 0 && filterObj[0].remark) {
                            remark = filterObj[0].remark
                        }
                    }
                    // 没有好友备注则继续获取群备注名称,没有群备注则取默认名称
                    if (!remark) {
                        let subs = this.$store.state.chat.currntGroupSubs
                        if (subs) {
                            let filterGroupObj = subs.filter(el => { return el.id == sid })
                            if (filterGroupObj.length > 0) {
                                if (filterGroupObj[0].remark) {
                                    remark = filterGroupObj[0].remark
                                } else {
                                    remark = filterGroupObj[0].nickname
                                }
                            }
                        }
                    }
                }
                return remark
            },
            // set at user index
            // _setContentAtIndexs() {
            //     let arr = []
            //     let content = this.content
            //     if (this.type == 'group') {
            //         let list = this.atUserList
            //         for (let i = 0; i < list.length; i++) {
            //             let name = list[i].name
            //             let startIndex = content.indexOf('@' + name + ' ')
            //             if (startIndex != -1) {
            //                 var atUser = {
            //                     start: startIndex,
            //                     end: startIndex + name.length + 1
            //                 }
            //                 arr.push(atUser)
            //             }
            //         }
            //     }
            //     this.atIndexs = arr
            // },
            play(id) {
                let video = document.getElementById(id + '')
                if (video) {
                    if (video.webkitRequestFullScreen) {
                        video.webkitRequestFullScreen()
                    } else if (video.mozRequestFullScreen) {
                        video.mozRequestFullScreen()
                    }
                    video.play()
                }
            },
            downLoad(url) {
                window.open(url)
            },
            selectAtUser(selectList) {
                let isDelUsers = []
                if (this.atUserList) {
                    isDelUsers = this.atUserList.filter(el => {
                        let isDel = true
                        selectList.some((item) => {
                            if (el.id == item.id) {
                                isDel = false
                                return true
                            }
                        })
                        return isDel
                    })
                }

                if (isDelUsers.length > 0) {
                    isDelUsers.forEach((item) => {
                        let match = '@' + item.name + ' '
                        this.content = this.content.replace(match, '')
                    })
                }

                let isNewAddUsers = []
                isNewAddUsers = selectList.filter(el => {
                    let isNew = true
                    this.atUserList.some((item) => {
                        if (el.id == item.id) {
                            isNew = false
                            return true
                        }
                    })
                    return isNew
                })

                let content = ''
                for (let i = 0; i < isNewAddUsers.length; i++) {
                    content = content + '@' + isNewAddUsers[i].name + ' '
                }
                this.content = this.content.substring(0, this.content.length - 1) + content
                this.atUserList = selectList
            },
            isShowDate(index, date, format) {
                let msgData = this.chatInfo.msgData
                let curTime = utils.dateFormat(date, format)
                let isShow = true
                if (index != 0) {
                    for (let i = 0; i < index; i++) {
                        let listDate = utils.dateFormat(msgData[i].date, format)
                        if (listDate == curTime) {
                            isShow = false
                            break
                        }
                    }
                }
                return isShow
            },
            getDateFormat(date, format) {
                return utils.dateFormat(date, format)
            },
            resend(item) {
                let params = {
                    msgType: this.chatInfo.msgType,
                    token: '',
                    id: this.chatInfo.id.toString(),
                    data: {
                        stage: 1,
                        msg: item.msg,
                        contentType: item.contentType,
                        msgId: item.msgId
                    }
                }
                this._sendServe(params)
            },
            sendMessage() {
                var that = this
                if (utils.getTimestamp() - this.lastSendTime < 800) {
                    this.fastSend = true
                    let timer = setTimeout(function(){
                        that.fastSend = false
                        clearTimeout(timer)
                    },3000)
                    return
                }
                if (this.content.trim() != '') {
                    let contentType = 1021
                    let atAll = false
                    var msg = ''
                    // @文本消息
                    if (this.atUserList.length > 0) {
                        // 最后过滤一遍@
                        this.atUserList = this.atUserList.filter(el => {
                            let matchName = '@' + el.name + ' '
                            return this.content.indexOf(matchName) != -1
                        })
                        let memberId = []
                        for (let i = 0; i < this.atUserList.length; i++) {
                            memberId.push(this.atUserList[i].id)
                            if (this.atUserList[i].id == '-1') {
                                atAll = true
                            }
                        }
                        // 回复类型消息
                        if (this.answerFlag) {
                            contentType = 1012
                            let srcMsg = JSON.parse(this.currentMsgData.msg)
                            let scContent = ''
                            if (this.currentMsgData.contentType == 1012) {
                                scContent = srcMsg.rc
                            } else {
                                scContent = srcMsg.content
                            }
                            msg = {
                                ct: 1007,
                                mid: atAll ? '' : memberId.join(','),
                                sc: scContent,
                                rc: this.content,
                                sid: this.currentMsgData.senderid,
                                st: utils.getTimestamp()
                            }
                        } else {
                            msg = {
                                content: this.content,
                                memberId: atAll ? '' : memberId.join(',')
                            }
                            contentType = 1007
                        }

                        // 普通消息
                    } else {
                        // 回复类型消息
                        if (this.answerFlag) {
                            let srcMsg = JSON.parse(this.currentMsgData.msg)
                            let scContent = ''
                            if (this.currentMsgData.contentType == 1012) {
                                scContent = srcMsg.rc
                            } else {
                                scContent = srcMsg.content
                            }
                            contentType = 1012
                            msg = {
                                ct: 1001,
                                mid: '',
                                sc: scContent,
                                rc: this.content,
                                sid: this.currentMsgData.senderid,
                                st: utils.getTimestamp()
                            }
                        } else {
                            msg = {
                                content: this.content
                            }
                        }
                    }

                    msg = JSON.stringify(msg)
                    let params = {
                        msgType: this.chatInfo.msgType,
                        token: '',
                        id: this.chatInfo.id.toString(),
                        data: {
                            stage: 1,
                            msg: msg,
                            contentType: contentType
                        }
                    }

                    this._sendServe(params)
                    this.lastSendTime = utils.getTimestamp()
                    this.answerFlag = false
                    this.answerTxt = ''
                    this.content = ''
                    this.atUserList = []
                }
            },
            _sendServe(params) {
                var that = this
                // let seqAutoInc = this.$store.state.chat.seqAutoInc
                if (!params.data.msgId) {
                    params.data.msgId = utils.getTimestamp()
                }
                this.$socket.send(params)
                // this.$store.dispatch('updateSeqAutoInc', seqAutoInc + 1)
                params.data.own = 1
                params.data.stage = 1
                params.data.date = new Date().getTime()
                params.data.destroy = 0
                if (this.type == 'group') {
                    params.data.groupid = this.currentChatId
                    params.data.senderid = this.userInfo.id
                    this.$store.dispatch('saveGroupMessage', params.data)
                    let groupTimer = setTimeout(function() {
                        let index = utils.chartListFilter(params.data.groupid, that.$store.state.chat.chatList)
                        var msgData = that.$store.state.chat.chatList[index].msgData.find(el => { return el.msgId == params.data.msgId })
                        if (msgData.stage == 1) {
                            // loading status
                            params.data.stage = -1
                            that.$store.dispatch('saveGroupMessage', params.data)
                            window.clearTimeout(groupTimer)
                            let groupTimerNet = setTimeout(function() {
                                // resend status
                                if (msgData.stage == 1) {
                                    params.data.stage = -2
                                    that.$store.dispatch('saveGroupMessage', params.data)
                                    window.clearTimeout(groupTimerNet)
                                }
                            }, 10000)
                        }
                    }, 3000)
                } else {
                    params.data.senderid = this.currentChatId
                    this.$store.dispatch('savePersonMessage', params.data)
                    let timer = setTimeout(function() {
                        let index = utils.chartListFilter(params.data.senderid, that.$store.state.chat.chatList)
                        var msgData = that.$store.state.chat.chatList[index].msgData.find(el => { return el.msgId == params.data.msgId })
                        if (msgData.stage == 1) {
                            // loading status
                            params.data.stage = -1
                            that.$store.dispatch('savePersonMessage', params.data)
                            window.clearTimeout(timer)
                            let timerNet = setTimeout(function() {
                                // resend status
                                if (msgData.stage == 1) {
                                    params.data.stage = -2
                                    that.$store.dispatch('savePersonMessage', params.data)
                                    window.clearTimeout(timerNet)
                                }
                            }, 10000)
                        }
                    }, 3000)
                }
            },
            enter() {
                // filter \n
                let index = this.content.indexOf('\n')
                if (index == this.content.length - 1) {
                    this.content = this.content.substring(0, this.content.length - 1)
                }
                this.sendMessage()

            },
            ctrlEnter() {
                // this.this.content = this.this.content + '\n'
                let myField = document.getElementById('editArea')
                this.content = utils.insertAtCursor(myField, '\n')
            },
            listenUp(event) {
                let isGroup = this.type == 'group'
                if ((event.keyCode == 16 || event.keyCode == 50) && isGroup && event.keyCode != 8  && event.keyCode != '229' && this.content.substring(this.content.length - 1, this.content.length) == '@') {
                    this.atUserList = this.atUserList.filter(el => {
                        let matchName = '@' + el.name + ' '
                        return this.content.indexOf(matchName) != -1
                    })
                    this.showAt = true
                }
            },
            cut(event) {
                let isGroup = this.type == 'group'
                if (!isGroup) {
                    return
                }
                let dom = document.getElementById('editArea')
                var text = utils.getSelectText(dom)
                if (text) {
                    this.atUserList = this.atUserList.filter(el => {
                        let matchName = '@' + el.name + ' '
                        return text.indexOf(matchName) == -1
                    })
                }
            },
            _resetSubGroup(id) {
                baseApi.getGroupSubs({ group_id: id }).then(res => {
                    if (res.code == 200) {
                        this.$store.dispatch('setCrrentGroupSubs', res.data)
                    } else {
                        // this.$socket.close()
                        this.$confirm('您的授权已失效，请重新登录！', '提示', {
                            confirmButtonText: '知道了',
                            showClose: false,
                            showCancelButton: false,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(() => {
                            sessionStorage.removeItem('key')
                            this.$store.dispatch('resetBase')
                            this.$store.dispatch('resetChat')
                            this.$router.push({ path: '/login' })
                            // window.location.href = window.location.protocol + '//' + window.location.host + '/login'
                        })
                    }
                })
            },
            listen (event) {
                if (!this.content) {
                    let chatList = this.$store.state.chat.chatList
                    // down arrow key
                    if (event.keyCode == 40) {
                        let currChatIndex = chatList.findIndex((el) => {
                            return el.id == this.currentChatId
                        })
                        if (currChatIndex == chatList.length - 1) {
                            return
                        }
                        currChatIndex++
                        this.$store.dispatch('setCurrentChat', chatList[currChatIndex].id)
                        let target = document.getElementById(chatList[currChatIndex].id + '_id')
                        let container = document.querySelector('.chat-list').parentNode.parentNode
                        scrollIntoView(container, target)
                        // group type reset subGroup
                        if (chatList[currChatIndex].msgType == 13) {
                            this._resetSubGroup(chatList[currChatIndex].id)
                        }
                        // up arrow key
                    } else if (event.keyCode == 38) {
                        let currChatIndex = chatList.findIndex((el) => {
                            return el.id == this.currentChatId
                        })
                        if (currChatIndex == 0) {
                            return
                        }
                        currChatIndex--
                        this.$store.dispatch('setCurrentChat', chatList[currChatIndex].id)
                        let target = document.getElementById(chatList[currChatIndex].id + '_id')
                        let container = document.querySelector('.chat-list').parentNode.parentNode
                        scrollIntoView(container, target)
                        // group type reset subGroup
                        if (chatList[currChatIndex].msgType == 13) {
                            this._resetSubGroup(chatList[currChatIndex].id)
                        }
                    }
                    return
                }

                let isGroup = this.type == 'group'
                if (event.keyCode === 13) {
                    event.preventDefault() // 阻止浏览器默认换行操作
                    return false
                }
                if (!isGroup) {
                    return
                }
                // 处理删除@情况操作
                if (this.atUserList.length > 0) {
                    if (event.keyCode == 8) {
                        let dom = document.getElementById('editArea')
                        var text = utils.getSelectText(dom)
                        var startSelIndex = utils.getCursortPosition(dom)
                        if (!text) {
                            let leftContent = this.content.substring(0, startSelIndex)
                            let endContent = this.content.substring(startSelIndex)
                            let indexAt = leftContent.lastIndexOf('@')
                            let name = leftContent.substring(indexAt)
                            let length = this.atUserList.filter(el => { return ('@' + el.name + ' ') == name }).length
                            if (length > 0) {
                                this.atUserList = this.atUserList.filter(el => {
                                    return ('@' + el.name + ' ') != name
                                })
                                leftContent = leftContent.substring(0, indexAt)
                                this.content = leftContent + endContent
                                this.$nextTick(() => {
                                    utils.setCaretPosition(dom, startSelIndex - name.length)
                                })
                                // 阻止浏览器默认换行操作
                                event.preventDefault()
                            }
                        } else {
                            this.atUserList = this.atUserList.filter(el => {
                                let matchName = '@' + el.name + ' '
                                return text.indexOf(matchName) == -1
                            })
                        }
                    }
                }

            },
            getUserAvatar(id) {
                let avatar = ''
                if (this.currentGroupSubs) {
                    let filter = this.currentGroupSubs.filter(el => { return el.id == id })[0]
                    if (filter) {
                        avatar = filter.usericon
                    }
                }
                return avatar
            },
            getUserName(id) {
                let name = ''
                if (this.currentGroupSubs) {
                    let filter = this.currentGroupSubs.filter(el => { return el.id == id })[0]
                    name = filter.remark != '' ? filter.remark : filter.nickname
                }
                return name
            },
            transToEmojiHtml(str) {
                let htmlContent = utils.replaceURLToLink(str)
                htmlContent = emoji.transToEmojiImg(htmlContent)
                return htmlContent
            },
            bingMsgContent(e) {
                this.content = e.target.innerHTML
            },
            chooseEmoji(e) {
                let myField = document.getElementById('editArea')
                this.content = utils.insertAtCursor(myField, e)
            },
            chooseFriend() {
                if (!this.profileInfo.friendName) {
                    this.showNotFriend = true
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.showNotFriend = false
                        }, 3000)
                    })
                    return
                }
                let params = {
                    id: this.profileInfo.id,
                    icon: this.profileInfo.avatar,
                    name: this.profileInfo.friendName,
                    time: '',
                    count: 0,
                    msgType: 11,
                    msgData: [],
                    mute: this.profileInfo.mute
                }

                let inputObj = {
                    content: '',
                    atUserList: [],
                    type: 'friend',
                    id: this.profileInfo.id
                }
                this.$store.dispatch('insertChatInput', inputObj)
                this.$store.dispatch('createChat', params)
                this.$router.push({ path: '/message' })
                this.showProfilePop = false
                this.showChatProfilePop = false
                this.showGroupMembers = false
            },
            showProfile(e, item) {
                let friends = this.$store.state.base.friendList
                let friend = ''
                // 获取好友是否勿扰状态
                let mute = 0
                for (let key in friends) {
                    let fris = friends[key]
                    let filterObj = fris.filter(el => { return el.id == item.id })
                    if (filterObj.length > 0) {
                        mute = filterObj[0].mute
                        friend = filterObj[0]
                    }
                }
                this.profileInfo = {
                    friendName: '',
                    x: e.clientX,
                    y: e.clientY,
                    id: item.id,
                    avatar: item.usericon,
                    name: item.remark != '' ? item.remark : item.nickname,
                    mute: mute
                }
                if (friend) {
                    this.profileInfo.friendName = friend.remark || friend.nickname
                }
                this.showProfilePop = true
            },
            showProfileChat(e, id) {
                if (id == this.userInfo.id) {
                    return
                }
                let filterObj = this.$store.state.chat.currntGroupSubs.filter(el => { return el.id == id })
                let item = null
                if (filterObj && filterObj.length > 0) {
                    item = filterObj[0]
                }
                if (!item) {
                    return
                }
                let friends = this.$store.state.base.friendList
                let friend = ''
                // 获取好友是否勿扰状态
                let mute = 0
                for (let key in friends) {
                    let fris = friends[key]
                    let filterObj = fris.filter(el => { return el.id == item.id })
                    if (filterObj.length > 0) {
                        mute = filterObj[0].mute
                        friend = filterObj[0]
                    }
                }
                this.profileInfo = {
                    friendName: '',
                    x: e.clientX,
                    y: e.clientY,
                    id: item.id,
                    avatar: item.usericon,
                    name: item.remark != '' ? item.remark : item.nickname,
                    mute: mute
                }
                if (friend) {
                    this.profileInfo.friendName = friend.remark || friend.nickname
                }
                this.showChatProfilePop = true
            },

            closeContextMenu() {
                this.contextMenuShow = false
            },
            clickContextMenu(e) {
                if (e == 'replay') {
                    this.showReplay = true
                    this.$store.dispatch('updateIsReplyMsg', true)
                }
                if (e == 'answer') {
                    let text = ''
                    if (this.currentMsgData.contentType == 1012) {
                        text = JSON.parse(this.currentMsgData.msg).rc
                    } else {
                        text = JSON.parse(this.currentMsgData.msg).content
                    }

                    this.answerFlag = true
                    this.answerTxt = text
                }
                if (e == 'copy') {
                    let _this = this
                    let text = JSON.parse(this.currentMsgData.msg).content
                    this.$copyText(text).then(function (e) {
                        _this.$message({
                            message: '复制成功',
                            type: 'success'
                        })
                    }, function (e) {
                        _this.$message.error('复制失败')
                    })
                }
                if (e == 'recall') {
                    let params = {
                        msgType: this.chatInfo.msgType,
                        token: '',
                        id: this.chatInfo.id.toString(),
                        data: {
                            stage: 1,
                            msg: this.content,
                            contentType: 55,
                            msgId: this.currentMsgData.msgId
                        }
                    }
                    this._sendServe(params)
                }
                this.contextMenuShow = false
            },
            handleRight(e, item) {
                this.contextMenuShow = true
                this.clickPosition = {
                    clientX: e.clientX,
                    clientY: e.clientY
                }
                this.currentMsgData = item
            },
            scrollDown() {
                if (this.$refs['msgScrollbar']) {
                    this.$refs['msgScrollbar'].update()
                    this.$refs['msgScrollbar'].wrap.scrollTop = this.$refs['msgScrollbar'].wrap.scrollHeight
                }
            },
            // 拖拽上传图片
            fileDragover (e) {
                e.preventDefault()
            },
            // 拖拽上传图片
            fileDrop (e) {
                e.preventDefault()
                let inputFile = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
                this._sendImg(inputFile)
            },
            sendPasteImg() {
                let name = '截图' + new Date().getTime() + '.png'
                let inputFile = utils.dataURLtoFile(this.pasteImg, name)
                this._sendImg(inputFile)
                this.showPasteImg = false
            },
            uploadImage(e) {
                let inputFile = e.target.files[0]
                this._sendImg(inputFile)
            },
            _sendImg(inputFile) {
                var that = this
                if (inputFile) {
                    if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') {
                        this._sendFile(inputFile)
                    } else {
                        let size = inputFile.size
                        let formData = new FormData()
                        formData.append('key', sessionStorage.getItem('key'))
                        formData.append('img', inputFile)
                        const loading = this.$loading({
                            lock: true,
                            text: '图片发送中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        baseApi.uploadImg(formData).then(res => {
                            document.getElementById('image_file_id').value = null;
                            document.getElementById('file_id').value = null;
                            if (res.code == 200) {
                                var img = new Image()
                                img.src = res.data.url
                                img.onload = function () {
                                    let height = img.height
                                    let width = img.width
                                    let msg = {
                                        url: res.data.url,
                                        name: res.data.name,
                                        h: height,
                                        w: width,
                                        s: size,
                                        o: 1
                                    }
                                    msg = JSON.stringify(msg)
                                    let params = {
                                        msgType: that.chatInfo.msgType,
                                        token: '',
                                        id: that.chatInfo.id.toString(),
                                        data: {
                                            stage: 1,
                                            msg: msg,
                                            contentType: 1022
                                        }
                                    }
                                    that._sendServe(params)
                                    loading.close()
                                    img.onload = null
                                }
                            }
                        })
                    }
                }
            },
            _sendFile(inputFile) {
                if (inputFile) {
                    let size = inputFile.size
                    let formData = new FormData()
                    formData.append('key', sessionStorage.getItem('key'))
                    formData.append('img', inputFile)
                    const loading = this.$loading({
                        lock: true,
                        text: '文件发送中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                    baseApi.uploadImg(formData).then(res => {
                        document.getElementById('image_file_id').value = null
                        document.getElementById('file_id').value = null
                        if (res.code == 200) {
                            let msg = {
                                path: res.data.url,
                                name: res.data.name,
                                size: size,
                                ut: utils.getTimestamp()
                            }
                            msg = JSON.stringify(msg)
                            let params = {
                                msgType: this.chatInfo.msgType,
                                token: '',
                                id: this.chatInfo.id.toString(),
                                data: {
                                    stage: 1,
                                    msg: msg,
                                    contentType: 1018
                                }
                            }
                            this._sendServe(params)
                            loading.close()
                        }
                    })
                }
            },
            uploadFile(e) {
                let inputFile = e.target.files[0]
                this._sendFile(inputFile)
            },
            showGroupSubs() {
                if (this.chatInfo.msgType == 13) {
                    this.showGroupMembers = !this.showGroupMembers
                }
            },
            showPreview(id) {
                for (let i = 0; i < this.imagesData.length; i++) {
                    if (this.imagesData[i].id == id) {
                        this.imgPreviewIndex = i
                        this.imgPreviewVisible = true
                    }
                }
            },
            hidePreview() {
                this.imgPreviewVisible = false
                this.imgPreviewIndex = 0
            }
        },
        activated() {
            this.$nextTick(function () {
                if (document.querySelector('#editArea')) {
                    document.querySelector('#editArea').focus()
                }
            })
        },
        mounted() {
        },
        updated() {
            // this.$nextTick(() => {
            //     if (this.$refs['msgScrollbar']) {
            //         this.$refs['msgScrollbar'].update()
            //         this.$refs['msgScrollbar'].wrap.scrollTop = this.$refs['msgScrollbar'].wrap.scrollHeight
            //     }
            // })
        }
    }
</script>
<style lang="less">
    .file-cont {
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 280px;
        height: 92px;
        margin-right: 15px;
        background: #fff;
        padding-left: 15px;
        padding-right: 15px;
        .file-name {
            color: #23242B;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
        .file-info {
            margin-top: 20px;
            color: #9DA4B3;
            font-size: 12px;
            .file-info_down {
                cursor: pointer;
                color: #419bf9;
                border-left: 1px solid #efefef;
                margin-left: 15px;
                padding-left: 15px;
            }
        }
    }

    .file-cont_l {
        text-align: left;
    }

    .file-cont_r {
        img {
            width: 60px;
            height: 60px;
        }
    }
    .mini-profile {
        width: 170px;
        height: 220px;
        background-color: #fff;
        overflow: hidden;
        border-radius: 5px;
        box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
        font-size: 0;
        .mini-profile-avatar {
            width: 170px;
            height: 170px;
        }
        .mini-profile-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5px;
            height: 50px;
            box-sizing: border-box;
            .profile-name {
                width: 126px;
                font-size: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
</style>
<style>
    div:focus {
        outline: none !important;
    }

    .van-toast--text {
        width: fit-content;
        min-width: 96px;
        min-height: unset;
        padding: 8px 12px;
    }
     .van-toast {
         position: absolute;
         top: 50%;
         left: 50%;
         display: -webkit-box;
         display: -webkit-flex;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -webkit-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: center;
         -webkit-align-items: center;
         align-items: center;
         -webkit-box-pack: center;
         -webkit-justify-content: center;
         justify-content: center;
         box-sizing: content-box;
         max-width: 70%;
         padding: 16px;
         color: #fff;
         font-size: 14px;
         line-height: 20px;
         white-space: pre-wrap;
         text-align: center;
         word-break: break-all;
         background-color: rgba(50, 50, 51, 0.88);
         border-radius: 4px;
         -webkit-transform: translate3d(-50%, -50%, 0);
         transform: translate3d(-50%, -50%, 0);
     }

    .van-toast--text .van-toast__text {
        margin-top: 0;
    }
</style>
